<template>
  <div>
    <div class="search-group">
      <div class="search-item">
        <el-input v-model="query.tableName" placeholder="请输入表名称" />
      </div>
      <el-button-group>
        <el-button type="primary" icon="el-icon-search" @click="search" />
        <el-button icon="el-icon-refresh" @click="reset" />
      </el-button-group>
    </div>
    <div class="content">
      <el-table v-loading="table.loading" :data="table.data" border style="width: 100%">
        <el-table-column align="center" prop="tableName" label="表名称" />
        <el-table-column align="center" prop="tableType" label="表类型" />
        <el-table-column align="center" prop="rowFormat" label="行格式" />
        <el-table-column align="center" prop="tableRows" label="数据行" />
        <el-table-column align="center" prop="avgRowLength" label="平均行长度" />
        <el-table-column align="center" prop="dataLength" label="数据长度" />
        <el-table-column align="center" prop="maxDataLength" label="最大数据长度" />
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" prop="updateTime" label="更新时间" />
        <el-table-column align="center" prop="tableCollation" label="字符编码集" />
        <el-table-column align="center" prop="tableComment" label="备注" />
        <el-table-column align="center" label="操作" fixed="right" width="100px">
          <template slot-scope="{row}">
            <el-button-group class="operation">
              <el-button type="text" @click="edit('see',row.tableName)">详情</el-button>
              <el-button type="text" @click="field(row.tableName)">字段</el-button>
              <el-button type="text" @click="generateCode(row)">生成代码</el-button>
              <el-button type="text" @click="edit('edit',row.tableName)">编辑</el-button>
              <c-button type="text" auto-confirm @confirm="remove(row.tableName)" />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <table-page :total="table.total" :current="query.pageNum" :size="query.pageSize" @settingTablePage="settingTablePage" />
    </div>
    <Field ref="field" />
    <Edit ref="edit" @refreshPageData="search" />
    <GenerateCode ref="generateCode" />
  </div>
</template>

<script>
import { deleteByTableName, tableByPage } from '@/api/code-generate'
import Field from '@/views/code-generate/operation/field'
import Edit from '@/views/code-generate/operation/edit'
import TablePage from '@/components/tablePage'
import GenerateCode from '@/views/code-generate/operation/generateCode'
import CButton from '@/components/confirmButton/CButton'

export default {
  name: 'CodeGenerate',
  components: { CButton, GenerateCode, TablePage, Field, Edit },
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 10,
        tableName: null
      },
      table: {
        data: null,
        total: null,
        loading: false
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    search() {
      this.query.pageNum = 1
      this.getTableData()
    },
    settingTablePage(pageNum, pageSize) {
      this.query.pageNum = pageNum
      this.query.pageSize = pageSize
      this.getTableData()
    },
    reset() {
      this.query.tableName = null
      this.search()
    },
    getTableData() {
      this.table.loading = true
      tableByPage(this.query).then(res => {
        this.table.total = res.total
        this.table.data = res.rows
        this.table.loading = false
      })
    },
    details() {
      this.$refs['details'].open()
    },
    field(tableName) {
      this.$refs['field'].open(tableName)
    },
    generateCode(row) {
      this.$refs['generateCode'].open(row.tableName, row.tableComment)
    },
    edit(optionType, tableName) {
      this.$refs['edit'].open(optionType, tableName)
    },
    remove(tableName) {
      deleteByTableName(tableName).then(res => {
        this.$message.success('删除成功')
        this.search()
      })
    }
  }
}
</script>

<style scoped>

</style>
